<template>
  <div class="check_client_detail_page">
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        企业信息
      </div>
      <div class="content">
        <div class="img_list">
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.businessPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.businessPic)"></i>
              </div>
            </div>
            <div class="name">企业营业执照</div>
          </div>
        </div>
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">企业名称：</div>
                <div class="value">{{ detailObj.enterpriseName }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">统一社会信用代码：</div>
                <div class="value">{{ detailObj.creditCode }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">法定代表人：</div>
                <div class="value">{{ detailObj.legal }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">注册资本：</div>
                <div class="value">1{{ detailObj.registered }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">注册地址：</div>
                <div class="value">{{ detailObj.address }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">成立日期：</div>
                <div class="value">{{ detailObj.establishedDate }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">有限期限：</div>
                <div class="value">{{ detailObj.limited }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">公司类型：</div>
                <div class="value">{{ detailObj.enType }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">公司性质：</div>
                <div class="value">{{ detailObj.property }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">行业分类：</div>
                <div class="value">{{ detailObj.industry }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">公司电话：</div>
                <div class="value">{{ detailObj.companyPhone }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">办公地址：</div>
                <div class="value">{{ detailObj.officeAddress }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24">
              <div class="msg_line">
                <div class="key">企业经营范围：</div>
                <div class="value">{{ detailObj.remark }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        法人信息
      </div>
      <div class="content">
        <div class="img_list">
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.frContactRPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.frContactRPic)"></i>
              </div>
            </div>
            <div class="name">身份证人像面</div>
          </div>
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.frContactBPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.frContactBPic)"></i>
              </div>
            </div>
            <div class="name">身份证国徽面</div>
          </div>
        </div>
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">法人姓名：</div>
                <div class="value">{{ detailObj.frContactName }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件类型：</div>
                <div class="value">{{ detailObj.frContactType }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">身份证号：</div>
                <div class="value">{{ detailObj.frContactId }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">性别：</div>
                <div class="value">{{ detailObj.frContactSex }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">民族：</div>
                <div class="value">{{ detailObj.frContactEthnic }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">签发机关：</div>
                <div class="value">{{ detailObj.frContactIssuing }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">出生日期：</div>
                <div class="value">{{ detailObj.frContactBirth }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件起始日期：</div>
                <div class="value">{{ detailObj.frContactCardStart }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件到期日期：</div>
                <div class="value">{{ detailObj.frContactCardEnd }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">户籍地址：</div>
                <div class="value">{{ detailObj.frContactAddress }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">手机号码：</div>
                <div class="value">{{ detailObj.frContactPhone }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">法人邮箱：</div>
                <div class="value">{{ detailObj.frContactEmail }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        银行账户信息
      </div>
      <div class="content">
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">开户名称：</div>
                <div class="value">{{ detailObj.enterpriseBank.accountName }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">银行账号：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankNumber }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">开户银行：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankDeposit }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">开户行所在地：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankProvinces }}/{{ detailObj.enterpriseBank.bankCities }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">开户支行：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankBranch }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">大额行号（联行号）：</div>
                <div class="value">{{ detailObj.enterpriseBank.bankCode }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        联系人信息
      </div>
      <div class="content">
        <div class="img_list">
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.adminOperation.contactRPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.adminOperation.contactRPic)"></i>
              </div>
            </div>
            <div class="name">身份证人像面</div>
          </div>
          <div class="img_item">
            <div class="img_box">
              <img :src="baseURL + detailObj.adminOperation.contactBPic" alt="" class="img" />
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.adminOperation.contactBPic)"></i>
              </div>
            </div>
            <div class="name">身份证国徽面</div>
          </div>
        </div>
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">姓名：</div>
                <div class="value">{{ detailObj.adminOperation.contactName }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件类型：</div>
                <div class="value">{{ detailObj.adminOperation.contactType }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">身份证号：</div>
                <div class="value">{{ detailObj.adminOperation.contactId }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">性别：</div>
                <div class="value">{{ detailObj.adminOperation.contactSex }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">民族：</div>
                <div class="value">{{ detailObj.adminOperation.contactEthnic }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">签发机关：</div>
                <div class="value">{{ detailObj.adminOperation.contactIssuing }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">出生日期：</div>
                <div class="value">{{ detailObj.adminOperation.contactBirth }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件起始日期：</div>
                <div class="value">{{ detailObj.adminOperation.contactCardStart }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件到期日期：</div>
                <div class="value">{{ detailObj.adminOperation.contactCardEnd }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">户籍地址：</div>
                <div class="value">{{ detailObj.adminOperation.contactAddress }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">手机号码：</div>
                <div class="value">{{ detailObj.adminOperation.contactPhone }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">邮箱：</div>
                <div class="value">{{ detailObj.adminOperation.contactEmail }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod" v-if="detailObj.businessPic || detailObj.adContactCorporate">
      <div class="title">
        <i class="icon"></i>
        附件信息
      </div>
      <div class="content">
        <div class="img_list">
          <div class="img_item" v-if="detailObj.businessPic">
            <div class="sign_box">
              <img src="@/assets/crm/pdf.png" alt="" class="img" />
              <div class="mask">
                <a class="el-icon-search" :href="baseURL + detailObj.signaturePic" download="电子签名认证授权委托书.pdf" alt=""></a>
              </div>
            </div>
            <div class="name">电子签名认证授权委托书</div>
          </div>
          <div class="img_item" v-if="detailObj.adContactCorporate">
            <div class="sign_box">
              <img src="@/assets/crm/pdf.png" alt="" class="img" />
              <div class="mask">
                <a class="el-icon-search" :href="baseURL +  detailObj.adContactCorporate" download="法人授权委托书" alt=""></a>
              </div>
            </div>
            <div class="name">法人授权委托书</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        企业审核
      </div>
      <div class="check_content">
        <div class="check_line">
          <div class="key">审核状态</div>
          <div class="value">
            <el-button
              class="btn left_btn"
              :type="status === 2 ? 'primary' : ''"
              @click="status = 2"
            >审核通过</el-button>
            <el-button
              class="btn right_btn"
              :type="status === 3 ? 'danger' : ''"
              @click="status = 3"
            >审核失败</el-button>
          </div>
        </div>
        <div class="check_line">
          <div class="key key_reason">审核原因</div>
          <div class="value">
            <el-form
              ref="checkForm"
              :model="checkForm"
              :rules="status === 3 ? checkRules : {}"
              style="width: 100%;"
            >
              <el-form-item prop="remark" >
                <el-input
                  type="textarea"
                  placeholder="请输入审核建议内容"
                  :rows="5"
                  class="textarea"
                  v-model="checkForm.remark"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="btns">
          <el-button
            class="btn"
            plain
          >取 消</el-button>
          <el-button
            class="btn btn_right"
            type="primary"
            :disabled="status !== 2 && status !== 3"
            @click="check"
          >
            确定
          </el-button>
        </div>
      </div>
    </div>
    <CustomDialog
      class="preview_img_mask"
      title="查看内容"
      width="70%"
      :visible="dialogVisible"
      @close="closeDialog"
    >
      <div class="mask_dialog_content">
        <div class="img_box">
          <img :src="baseURL + previewBigImgUrl" alt="" class="img" />
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
import { clientDetail, checkClient } from '@/api/crm'
import CustomDialog from '@/customComponents/dialog'

export default {
  components: {
    CustomDialog,
  },
  data() {
    return {
      baseURL: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API :
        process.env.VUE_APP_HTTP_REQUEST_ADDRESS,
      // 状态 0：未认证 1：等待审核 2：已认证 3：认证失败
      detailObj: {
        enterpriseBank: {},
        adminOperation: {}
      },
      dialogVisible: false,
      previewBigImgUrl: '',
      status: '', // 提交审核用，2：成功 3：驳回
      checkForm: {
        remark: '', // 审核原因
      },
      checkRules: {
        remark: [
          { required: true, trigger: ['change', 'blur'], message: '请输入审核建议内容' },
        ]
      },
    }
  },
  watch: {
    status: {
      handler: function (newVal, oldVal) {
        if (newVal !== 40) {
          this.$refs.checkForm.clearValidate()
        }
      }
    }
  },
  mounted() {
    if (this.$route.query.enterpriseId) {
      this.enterpriseId = this.$route.query.enterpriseId
      this.getClientDetail()
    }
  },
  methods: {
    getClientDetail(){
      clientDetail(this.enterpriseId).then((res) => {
        if (res.code === 200) {
          this.detailObj = res.data
        }
      })
    },
    previewBigImg(url) {
      this.previewBigImgUrl = url
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.previewBigImgUrl = ''
    },
    // 融资审核
    check() {
      // status=3&remark=
      if (this.status === 3) {
        this.$refs.checkForm.validate((valid) => {
          if (valid) {
            this.checkClient()
          }
        })
      } else {
        this.checkClient()
      }
    },
    checkClient() {
      checkClient(
        this.enterpriseId,
        {
          status: this.status,
          remark: this.checkForm.remark,
        }
      ).then((res) => {
        console.log('aaaaaaaa')
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: this.status === 2 ? '审核成功' : '驳回成功',
            onClose: () => {
              this.$router.back()
            }
          })
        }
      }).catch(() => {
        this.$router.back()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.check_client_detail_page {
  .authenticate_status {
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    background-color: #fff;
    padding-left: 30px;
    padding-right: 60px;
    height: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    &.fail {
      background-color: #FFF7F6;
      border: 1px solid #FF4D4F;
      border-radius: 12px;
      box-shadow: 0 2px 6px 0 rgba(1, 24, 70, 0.10);
    }
    .name_box {
      display: flex;
      align-items: center;
      .name {
        color: #333;
        font-size: 30px;
        font-weight: 600;
        flex-shrink: 0;
      }
      .wait_status {
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 30px;
        border: 2px solid $theme;
        margin-left: 16px;
        color: $theme;
        font-size: 20px;
        flex-shrink: 0;
      }
      .success_status {
        height: 30px;
        margin-left: 16px;
        flex-shrink: 0;
        color: $theme;
        font-size: 20px;
        padding: 0 6px;
        height: 30px;
        border: 2px solid $theme;
        border-radius: 30px;
        display: flex;
        align-items: center;
        .img {
          display: block;
          width: 24px;
          height: 24px;
          margin-right: 4px;
        }
      }
      .fail_status {
        margin-left: 30px;
        display: flex;
        align-items: center;
        .fail_icon {
          display: block;
          width: 48px;
          height: 48px;
        }
        .text {
          flex: 1 1 auto;
          color: #FF4D4F;
          font-size: 13px;
          margin-left: 12px;
        }
      }
    }
    .btn {
      width: 96px;
      border-radius: 3px;
      font-weight: 500;
      margin-left: 60px;
    }
  }
  .mod {
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    background-color: #fff;
    margin-bottom: 16px;
    padding-top: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      padding-left: 16px;
      .icon {
        display: block;
        width: 3px;
        height: 16px;
        background-color: $theme;
        margin-right: 5px;
      }
    }
    .content {
      padding: 40px;
      .img_list {
        display: flex;
        padding-left: 80px;
        .img_item {
          .img_box {
            width: 340px;
            height: 214px;
          }
          .sign_box {
            width: 165px;
            height: 165px;
          }
          .img_box, .sign_box{
            position: relative;
            margin-right: 30px;
            .img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .mask {
              display: none;
            }
            &:hover {
              .mask {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 30px;
                font-weight: 600;
              }
            }
          }
          .name {
            margin-top: 20px;
            color: #333;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
          }
        }
      }
      .sign {
        margin-bottom: 38px;
        padding-left: 80px;
        display: flex;
        .img_box {
          .img {
            display: block;
            width: 165px;
            height: 165px;
            background-color: red;
          }
          .name {
            margin-top: 20px;
            color: #333;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
          }
        }
      }
      .msg_box {
        margin-top: 40px;
        .row {
          margin-bottom: 38px;
          &:last-child {
            margin-bottom: 0;
          }
          .msg_line {
            display: flex;
            align-items: center;
            .key {
              width: 206px;
              height: 14px;
              color: #777;
              font-size: 14px;
              text-align: right;
              flex-shrink: 0;
            }
            .value {
              flex: 1 1 auto;
              color: #333;
              font-size: 14px;
              height: 14px;
              line-height: 14px;
            }
          }
        }
      }
    }
    .check_content {
      padding: 40px 300px 40px 146px;
      .check_line {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
        .key {
          color: #777;
          font-size: 14px;
          margin-right: 10px;
          flex-shrink: 0;
          &.key_reason {
            align-self: flex-start;
            margin-top: 20px;
          }
        }
        .value {
          flex: 1 1 100%;
          display: flex;
          align-items: center;
          .btn {
            width: 120px;
          }
          .right_btn {
            margin-left: 20px;
          }
          .textarea {
            width: 100%;
          }
        }
      }
      .btns {
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
          width: 140px;
        }
        .btn_right {
          margin-left: 24px;
        }
      }
    }
  }
}
</style>
